<template>
  <el-dialog width="500px" title="确认收货" :visible.sync="dialogVisible" :close-on-click-modal="false">
    <div class="warn-box" style="padding:10px">
      <svg-icon style="margin-right:10px" icon-class="warn" :size="20" />
      <p style="color:#000000;line-height:23px">收货凭证图片可做法律依据，添加后不可进行删除，请谨慎操作。</p>
    </div>
    <el-form ref="ruleForm" :rules="rules" :model="form" label-width="100px">
      <el-form-item>
        <p>您确定要确认用户收货吗？</p>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input v-model="form.orderId" disabled />
      </el-form-item>
      <el-form-item label="用户收货凭证" prop="images">
        <crop-upload ref="cropUpload" :multiple="true" show-type="photo" :init-val="form.images" wrapper-width="100px" wrapper-height="100px" :photo-width="100" :photo-height="100" @setVal="imgChange" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { confirmGoods } from '@/api/order'
import cropUpload from '@/components/cropUpload'
export default {
  components: { cropUpload },
  // props: ['orderId'],
  props: {
    orderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        orderId: '',
        images: []
      },
      dialogVisible: false,
      rules: {
        images: [
          { required: true, message: '请上传用户收货凭证', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.form.orderId = this.orderId
        this.form.images = []
      }
    }
  },
  methods: {
    imgChange(val, type) {
      if (type === 'del') {
        this.form.images.splice(val, 1)
      } else {
        this.form.images.push(val)
      }
      this.$refs.cropUpload.sortList = this.form.images
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const params = { ...this.form }
          params.images = params.images.join(',')
          confirmGoods(params).then(res => {
            this.dialogVisible = false
            this.$emit('getList', true)
          })
        } else {
          this.$message({
            message: '请检查表单错误',
            type: 'error'
          })
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
a,
a:focus,
a:hover {
  color: $mainBlue;
}
</style>
